<template>
  <div>
    <!-- 搜索框 -->
    <MySearch seartitle="账号/姓名" />
    <!-- 添加 -->
    <Addlist />
    <!-- 表格 -->
    <div class="table">
      <el-table :data="list" :cell-style="{ 'text-align': 'center' }" border>
        <el-table-column v-for="(value, key) in title" :key="value" :prop="key.toString()" :label="value"
          align="center">
          <template #default="scope" v-if="key.toString() === 'status'">
            <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"
              @change="switchfn(scope.row.id)" />
          </template>
          <template #default="scope" v-if="key.toString() === 'admin_edit'">
            <div class="edit">
              <el-button size="small" text type='primary' @click="assignfn(scope.row.id)">分配角色</el-button>
              <el-button @click="edit(scope.row.id)" size="small" text type='primary'>编辑</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination :page-sizes="[100, 200, 300, 400]" layout="total, sizes, prev, pager, next, jumper"
        :total="data.total" background @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>

  </div>
</template>
  
<script setup lang='ts'>
import { computed, reactive, ref, toRefs } from 'vue';
import type { ITitle } from '#/global'
import Addlist from '@/components/addlist/add.vue'
import MySearch from '@/components/search/mySearch.vue'
import EventBus from '@/utils';
import * as http from '@/request/api'

async function assignfn(id: number) {
  let AssignRes = await http.admin.AdminRole(id)
  EventBus.emit('assign', { role: AssignRes.data, id: id })
}

// 接收home传过来的数据
interface IProps {
  title: ITitle,
  data: AdminListRespone
}
const props = defineProps<IProps>()
let list = computed(() => props.data.list)
console.log(list);

let title = computed(() => props.title)
const emit = defineEmits(['edit', 'paginate'])

// 编辑弹框
function edit(id: number) {
  emit('edit', id)
}
// 切换启用
function switchfn(params: number) {
  console.log(params);
}

// 切换分页
function handleSizeChange(val: number) {
  emit("paginate", val);
}
function handleCurrentChange(val: number) {
  emit("paginate", val);
}

</script>
  
<style scoped>
.pagination {
  height: 40px;
  margin: 10px;
  padding-bottom: 10px;
  float: right;
}
</style>